<style type="text/css">
    .page {
        bottom: 0;
        position: absolute;
        text-align: center;
        top: 200px;
        width: 100%;
    }
    
    .page.ng-leave {
        z-index: 9999;
    }
    
    .page.ng-enter {
        z-index: 8888;
    }
    
    .pageGo.ng-leave {
        -webkit-animation: slideOutLeft 0.2s both ease-in;
        -moz-animation: slideOutLeft 0.2s both ease-in;
        animation: slideOutLeft 0.2s both ease-in;
    }
    
    .pageGo.ng-enter {
        -webkit-animation: slideInRight 0.2s both ease-in;
        -moz-animation: slideInRight 0.5s both ease-in;
        animation: slideInRight 0.2s both ease-in;
    }
    /* slide in from the bottom */
    
    @keyframes slideOutLeft {
        to {
            transform: translateX(-100%);
        }
    }
    
    @-moz-keyframes slideOutLeft {
        to {
            -moz-transform: translateX(-100%);
        }
    }
    
    @-webkit-keyframes slideOutLeft {
        to {
            -webkit-transform: translateX(-100%);
        }
    }
    /* slide in from the right */
    
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }
    
    @-moz-keyframes slideInRight {
        from {
            -moz-transform: translateX(100%);
        }
        to {
            -moz-transform: translateX(0);
        }
    }
    
    @-webkit-keyframes slideInRight {
        from {
            -webkit-transform: translateX(100%);
        }
        to {
            -webkit-transform: translateX(0);
        }
    }
    </style>